<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./cart.css">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div class="shoppingBar">
            <h2>购物清单</h2>
            <table>
                <tbody>
                    <tr>
                        <th><input type="checkbox" title="全选"class="selectAll"></th>
                        <th>商品名称</th>
                       <th>数量</th>
                       <th>单价 (元)</th>
                        <th>金额（元）</th>
                        <th>操作</th>
                    </tr>
                    <tr class="commodity">
                        <th><input type="checkbox" class="input" value="1"></th>
                        <th class="content"><img src="../Day16/02.jpg" width="100px" height="100px">
                            <p>电视机 </p>
                        </th>
                        <th class="number"><button type="button" class="down">
                                -
                            </button> <span class="num">
                                1
                            </span> <button type="button" class="add">
                                +
                            </button></th>
                        <th class="danjia">
                            200
                        </th>
                        <th class="money">
                            200
                        </th>
                        <th><span class="glyphicon glyphicon-remove">删除
                            </span></th>
                    </tr>
                    <tr class="commodity">
                        <th><input type="checkbox" class="input" value="2"></th>
                        <th class="content"><img src="../Day17/2.jpg" width="100px" height="100px">
                            <p>洗衣机 </p>
                        </th>
                        <th class="number"><button type="button" class="down">
                            -
                        </button> <span class="num">
                            1
                        </span> <button type="button" class="add">
                            +
                        </button></th>
                        <th class="danjia">
                            150
                        </th>
                        <th class="money">
                            150
                        </th>
                        <th><span class="glyphicon glyphicon-remove">删除
                            </span></th>
                    </tr>
                    <tr class="commodity">
                        <th><input type="checkbox" class="input" value="3"></th>
                        <th class="content"><img src="../Day17/1 .jpg" width="100px" height="100px">
                            <p>冰箱 </p>
                        </th>
                        <th class="number"><button type="button" class="down">
                            -
                        </button> <span class="num">
                            1
                        </span> <button type="button" class="add">
                            +
                        </button></th>
                        <th class="danjia">
                            100
                        </th>
                        <th class="money">
                            100
                        </th>
                        <th><span class="glyphicon glyphicon-remove">删除
                            </span></th>
                    </tr>
                </tbody>
            </table>
            <div class="shoppingBar-footer">
                <div class="manage"><span class="delAll">
                        删除所选商品
                    </span> <span class="return">
                        继续购物
                    </span></div> <button id="go" type="button">
                    去结算
                </button>
                <div class="buy">
                    已选中商品  <span class="total-num">0</span>  个
                    合计费用  <span class="total-money">0</span>  ￥
                </div>
            </div>
        </div>
    </div>
    <script>
         
        // 购物车模块
        (function(){
 
            let aAdd = document.querySelectorAll(".add");
            let aDown = document.querySelectorAll(".down");
            let aNum = document.querySelectorAll(".num");
            let amoney = document.querySelectorAll(".money");
            let oTotalNum = document.querySelector(".total-num");
            let oTotalmoney = document.querySelector(".total-money");
            let input = document.querySelectorAll(".input")
            let len = aNum.length; 
            let data = [
                {dj: 200, number:1},
                {dj:150 , number:1},
                {dj:100 , number:1},            
            ]
            for(let i = 0; i < len; i++){
                aAdd[i].onclick = function(){                 
                    data[i].number++;
                    
                       
                        updateView(i)
                    
                    
                };
                aDown[i].onclick = function(){
                    
                    if(!data[i].number){
                        return;
                    } 
                    data[i].number--;
                    
                       
                        updateView(i)
                    
                   
                };
            }
            function getTotal(){            
                let n = 0;
                let p = 0;
                for(let i = 0; i < len; i++){
                    if(input[i].checked==true){
                        n += data[i].number;
                    p += data[i].number * data[i].dj;

                    }
                 
                }
                return {
                    totalNum : n,
                    totalmoney : p
                }
 
            }
            function updateView(index){
               
                    aNum[index].innerHTML = data[index].number;
                amoney[index].innerHTML = data[index].number * data[index].dj;
                

              
                oTotalNum.innerHTML = getTotal().totalNum;
                oTotalmoney.innerHTML = getTotal().totalmoney;
            }
        })();
            let arr = [1,2,3];
            arr.reduce(function(prev,item){
            },)
            document.querySelector('.selectAll').onclick = function(){    
document.querySelectorAll('.input').forEach(item=>item.checked = this.checked)




      
    }
    document.querySelectorAll('.input').forEach(function(item){
        item.onclick = function(){
            document.querySelector('.selectAll').checked = document.querySelectorAll('.input').length == document.querySelectorAll('.input:checked').length
        }
    })
 
    </script> 


</body>

</html>